<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图</title>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Zzkjx5aSdOUQe5SuPcKHQs3o"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container{
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
    //进行百度地图的初始化
    var map = new BMap.Map("container");          // 创建地图实例
    //var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    var point = new BMap.Point(113.758652, 34.734857)
    map.centerAndZoom(point, 15);                  // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom();

    //添加控件
    map.addControl(new BMap.NavigationControl());
    //缩放地图控件
    map.addControl(new BMap.OverviewMapControl());
    //比例尺
    map.addControl(new BMap.ScaleControl());
    //地图类型
    map.addControl(new BMap.MapTypeControl());
    //版本控件
    map.addControl(new BMap.CopyrightControl());
    //定位控件
    map.addControl(new BMap.GeolocationControl());

    //自定义控件
    //第一步，创建一个控件的类，让他继承自control
    // 定义一个控件类，即function
    function ZoomControl(){
        // 设置默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(50, 50);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

    //第二步，给这个控件类添加initialize方法，声明这个控件的样式和行为
    ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
        var div = document.createElement("div");
// 添加文字说明
        div.appendChild(document.createTextNode("放大2级"));
        // 设置样式
        div.style.cursor = "pointer";
        div.style.border = "1px solid gray";
        div.style.backgroundColor = "white";
        // 绑定事件，点击一次放大两级
        div.onclick = function(e){
            map.zoomTo(map.getZoom() + 2);
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
    }
    //最后一步，实例化这个控件类，并且通过addControl方法添加到地图中去
    var myZoomCtrl = new  ZoomControl();
    map.addControl(myZoomCtrl);
    //添加标注
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    //给标记添加点击事件
//    marker.addEventListener('click',function(e){
//        alert('我被双击了')
//    })
    //让标记变得可以拖拽
//    marker.enableDragging();
//    marker.addEventListener('dragend',function(e){
//        alert('当前位置' + '经度:' + e.point.lng + '纬度' + e.point.lat)
//    })
//    var opts = {
////        width : 500,     // 信息窗口宽度
////        height: 250,     // 信息窗口高度
//        title : "Hello"  // 信息窗口标题
//    };
//    var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
//    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
    //添加折线
//    var polyline = new BMap.Polyline([
//                new BMap.Point(113.758652, 34.734857),
//                new BMap.Point(113.727822, 34.732691)
//            ],
//            {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5}
//    );
//    map.addOverlay(polyline);

//    // 1.定义自定义覆盖物的构造函数
//    function SquareOverlay(center, length, color){
//        this._center = center;
//        this._length = length;
//        this._color = color;
//    }
//    // 继承API的BMap.Overlay
//    SquareOverlay.prototype = new BMap.Overlay();
//    //2.给类添加initialize方法，初始化这个自定义的覆盖物
//    SquareOverlay.prototype.initialize = function(map){
//// 保存map对象实例
//        this._map = map;
//        // 创建div元素，作为自定义覆盖物的容器
//        var div = document.createElement("div");
//        div.style.position = "absolute";
//        // 可以根据参数设置元素外观
//        div.style.width = this._length + "px";
//        div.style.height = this._length + "px";
//        div.style.background = this._color;
//// 将div添加到覆盖物容器中
//        map.getPanes().markerPane.appendChild(div);
//// 保存div实例
//        this._div = div;
//// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
//// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
//        return div;
//    };
//    //3.将覆盖物添加到指定的位置
//    // 实现绘制方法
//    SquareOverlay.prototype.draw = function(){
//// 根据地理坐标转换为像素坐标，并设置给容器
//        var position = this._map.pointToOverlayPixel(this._center);
//        this._div.style.left = position.x - this._length / 2 + "px";
//        this._div.style.top = position.y - this._length / 2 + "px";
//    };
//    //3.直接添加覆盖物
//    var mySquare = new SquareOverlay(map.getCenter(), 100, "red");
//    map.addOverlay(mySquare);
    map.addEventListener('click',function(e){
        var point = new BMap.Point(e.point.lng,e.point.lat);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    })
</script>